<template>
  <div class="Letter">
    <Head msg="系统通知"></Head>
    <div class="scroll-body">
      <cube-scroll
        ref="scroll"
        :data="note"
        :options="options"
        @pulling-up="userLetter"
      >
        <div class="letter-list" v-for="(item, index) in note" :key="index">
          <div class="letter-list-top">
            <div class="letter-title">
              {{ item.title }}
              <span v-if="note.is_unread == 1" class="letter-new">新</span>
            </div>
            <div class="letter-time">{{ item.create_time }}</div>
          </div>
          <div v-html="item.content" class="letter-list-bottom"></div>
        </div>
        <Notice msg="暂无通知" :notice="note.length"></Notice>
      </cube-scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';
import Notice from '@/components/Notice.vue';

@Component({
  components: {
    Head,
    Notice,
  },
})
export default class Letter extends Sence {
  public page: number = 1; //页码
  public size: number = 10; //页面记录数
  public note: any = []; //消息数据
  public options: object = {
    pullUpLoad: true,
  }; //上拉加载
  public mounted(): void {
    this.userLetter();
  }

  public userLetter(): void {
    this.post('api/v1/userLetter', {
      page: this.page,
      page_size: this.size,
    }).then((res: any) => {
      this.note = [...this.note, ...res.data.list];
      this.page += 1;
      if (res.data.list.length < this.size) {
        this.options = {
          pullUpLoad: false,
        }; //上拉加载
      }
    });
  }
}
</script>

<style scoped lang="stylus">
.scroll-body {
  height: calc(100vh - 45px);
}

.letter-list {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-bottom: 1px solid #eee;

  .letter-list-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .letter-list-bottom {
    text-align: left;
    margin-top: 20px;
    font-size: 16px;
    color: #808080;
    word-break: break-all;
  }

  .letter-title {
    font-weight: bold;

    .letter-new {
      color: red;
      font-size: 14px;
      font-weight: bold;
      margin-left: 10px;
    }
  }

  .letter-time {
    font-size: 14px;
    color: #808080;
  }
}
</style>
